<template>
  <div>
    <div class="login-head">
      <span @click="jumpFn()" style="color: #fff">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">密码登录</span>
      <span></span>
    </div>
    <div class="login-content">
      <section>
        <input type="text" v-model="userV" placeholder="账号" />
      </section>
      <section>
        <input
          type="password"
          v-model="passV"
          class="pass"
          placeholder="密码"
        />
        <span
          ><van-switch
            v-model="checked"
            size="0.6486rem"
            class="moveBtn"
            @change="changeType()"
        /></span>
      </section>
      <section>
        <input type="text" v-model="codeV" placeholder="验证码" />
        <img :src="imgCode && imgCode" alt="" @click="getCode()" />
        <div class="content-rightP" @click="getCode()">
          <p>看不清</p>
          <p>换一张</p>
        </div>
      </section>
    </div>
    <div class="content-bottom">
      <p>温馨提示:未注册过得账号,登录时将自动注册</p>
      <p>注册过得用户可凭账号密码登录</p>
    </div>
    <div class="login-btnF">
      <van-button type="primary" @click="login()" class="login-btn"
        >登录</van-button
      >
    </div>
    <p class="modifyPass" @click="jumpModify()">修改密码?</p>
  </div>
</template>

<script>
export default {
  name: "login",

  data() {
    return {
      checked: true,
      userV: "",
      passV: "",
      codeV: "",
      imgCode: "",
    };
  },
  mounted() {
    this.getCode();
  },
  methods: {
    jumpModify() {
      this.$store.commit("changeVal");
      this.$router.push({
        name: "modifyPass",
      });
    },
    jumpPeopleCenter(){
        this.$store.commit("idResult",this.userV);
        this.$router.push({
        name: "myVal",
      });
       window.localStorage.setItem("userValue", this.userV);
    },
    changeType() {
      if (this.checked == false) {
        $(".pass").attr("type", "text");
      } else {
        $(".pass").attr("type", "password");
      }
    },
    //判断密码是否展示
    getCode() {
      let api = `https://elm.cangdu.org/v1/captchas`;
      this.$http({
        url: api,
        method: "post",
        data:{
  
        },
        //    用于用户代理是否应该在请求情况下，向其它域发送cookie，不使用缓存数据
        withCredentials: true,
      }).then((res) => {
        //   console.log(res);
        this.imgCode = res.data.code;
      });
    },
    jumpFn() {
      this.$router.back();
    },
    //------------------------登录注册验证部分------------------------
    login() {
      console.log(this.userV, this.passV, this.codeV);
      let api = `https://elm.cangdu.org/v2/login`;
      this.$http({
        url: api,
        method: "post",
        withCredentials: true,
        data: {
          username: this.userV,
          password: this.passV,
          captcha_code: this.codeV,
        },
      }).then((res) => {
        console.log(res);
        console.log(res.data.message);
        if (res.data.message) {
          $(".login-btn").attr("id", "error");
          new TipBox({ type: "error", str: res.data.message, hasBtn: true });
        } else {
          $(".login-btn").attr("id", "success");
          new TipBox({ type: "success", str: "登录成功", hasBtn: true });
          this.jumpPeopleCenter()

        }
      });
    },
  },
};
</script>

<style scoped>
.content-rightP {
  font-size: 0.3243rem;
}
.content-rightP p:nth-child(1) {
  color: black;
}
.login-title {
  font-weight: 900;
}

.content-bottom {
  color: red;
  background-color: #f5f5f5;
  font-size: 0.3784rem;
}
.content-bottom p:nth-child(1) {
  padding-left: 0.2162rem;
  margin-top: 0.2162rem;
}
.content-bottom p:nth-child(2) {
  padding-left: 0.2162rem;
  margin-top: 0.3514rem;
}
.login-head {
  width: 100%;
  height: 1.2576rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
}
.login-title {
  color: white;
  position: relative;
  left: -0.5405rem;
  font-size: 0.5405rem;
}
.login-content {
  margin-top: 0.4054rem;
}
.login-content input {
  list-style: none;
  font-size: 0.4324rem;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: 400;
  font-family: Microsoft Yahei;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  width: 65%;
  height: 0.5405rem;
}
.login-content section {
  padding: 0.3784rem 0.5135rem;
  border-bottom: 0.027rem solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-content {
  background-color: #fff;
}
.login-btn {
  width: 9.5017rem;
}
.login-btnF {
  text-align: center;
}
.modifyPass {
  float: right;
  font-size: 0.3784rem;
  margin-right: 0.8108rem;
  margin-top: 0.2703rem;
}
</style>